<!-- 留言评论模块 -->
<template>
    <div class="tmsgBox"  ref="tmsgBox">
        <div class="tmsg-respond"  ref="respondBox">
            <h3>发表评论 <small v-show="isRespond" class="tcolorm" @click="removeRespond">取消回复</small></h3>
            <form class=""  >
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="说点什么呢``"
                  v-model="context">
                </el-input>
                <div :class="pBody?'OwO':'OwO OwO-open'">
                    <div class="OwO-logo" @click="pBody=!pBody">
                        <span>OwO表情</span>
                    </div>
                    <div class="OwO-body">
                        <ul class="OwO-items OwO-items-show">
                            <li class="OwO-item" v-for="(oitem,index) in OwOlist" :key="'oitem'+index" @click="choseEmoji(oitem.title)">
                                <img :src="require('../../../assets/static/img/emot/image/'+oitem.url)" >
                            </li>
                        </ul>
                        <div class="OwO-bar">
                            <ul class="OwO-packages">
                                <li class="OwO-package-active">Emoji</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <el-row class="tmsg-r-info">
                    <el-col :span="24" class="info-submit">
                        <p class="tcolors-bg" @click="sendMsg">{{sendTip}}</p>
                    </el-col>
                </el-row>
            </form>
        </div>
         <div class="tmsg-comments"  ref="listDom">
            <a href="#" class="tmsg-comments-tip">活捉 {{comments?comments.length:0}} 条</a>
            <div class="tmsg-commentshow">
              <div>
                <div v-for="item in comments" :key="item.id" style="border-bottom: 1px solid #ccc;padding: 10px 0;">
                  <!--          一级评论-->
                  <div style="display: flex">
                    <div style="width: 100px; text-align: center"> <!--头像-->
                      <el-image :src="item.avatarUrl" style="width: 50px; height: 50px; border-radius: 50%"></el-image>
                    </div>

                    <div style="flex: 1; font-size: 14px; padding: 5px 0; line-height: 25px"><!--内容-->
                      <div style="">
                        <b>{{item.nickname}}:</b>

                        <p style=" margin-left: 10px; height: 30px;display: inline-block;text-align: center;line-height: 30px" v-html="analyzeEmoji(item.content)">{{item.content}}</p>
                        <div style="text-align: left; margin-top: 30px;">
                          <div style="display: inline-block">
                            <i class="el-icon-time"></i>
                            <span style="margin-left: 10px;">{{item.time}}</span>
                          </div>
                          <div style="display: inline-block; margin-left: 50px">
                            <el-button style="margin-left: 5px" type="text" @click="handleReply(item.id)">回复</el-button>
                          </div>
                          <div v-if="user.id == item.userId" style="display: inline-block;float: right;">
                            <template>
                              <el-popconfirm
                                  confirm-button-text='是的'
                                  cancel-button-text='再想想'
                                  icon="el-icon-info"
                                  icon-color="red"
                                  @confirm="del(item.id)"
                                  title="确定删除这段评论吗？"
                              >
                                <el-button slot="reference" style="margin-left: 20px; color: red" type="text"  >删除</el-button>
                              </el-popconfirm>
                            </template>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!--          多级评论-->
                  <div v-if="item.children.length"  style="padding-left: 35px; ">
                    <div v-for="subItem in item.children " :key="subItem.id" style="padding: 5px 30px; display: flex">
                      <!--            回复列表-->
                      <div style="width: 80px; text-align: center;"> <!--头像-->
                        <el-image :src="subItem.avatarUrl" style="width: 35px; height: 35px; border-radius: 50%"></el-image>
                      </div>
                      <div style="flex: 1; font-size: 14px; padding: 5px 0; line-height: 25px"><!--内容-->
                        <div>
                          <span>回复 </span><b style="color: #3a8ee6">@{{subItem.pnickName}}</b>
                        </div>
                        <div style="padding-left: 10px">
                          <b>{{subItem.nickname}}:</b>
                          <p style="margin-left: 10px; display: inline-block;" v-html="analyzeEmoji(subItem.content)">{{subItem.content}}</p>
                          <div style="text-align: left; margin-top: 20px;">
                            <div style="display: inline-block">
                              <i class="el-icon-time"></i>
                              <span style="margin-left: 10px;">{{subItem.time}}</span>
                            </div>
                            <div style="display: inline-block; margin-left: 50px">
                              <el-button style="margin-left: 5px" type="text" @click="handleReply(subItem.id)">回复</el-button>
                            </div>
                            <div v-if="user.id == subItem.userId" style="display: inline-block;float: right;">
                              <template>
                                <el-popconfirm
                                    confirm-button-text='好的'
                                    cancel-button-text='不用了'
                                    icon="el-icon-info"
                                    icon-color="red"
                                    @confirm="del(subItem.id)"
                                    title="这是一段内容确定删除吗？"
                                >
                                  <el-button slot="reference" style="margin-left: 20px; color: red" type="text"  >删除</el-button>
                                </el-popconfirm>
                              </template>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
                <h1 v-show='hasMore' class="tcolors-bg" @click="addMoreFun" >查看更多</h1>
                <h1 v-show='!hasMore' class="tcolors-bg" >没有更多</h1>
            </div>
        </div>


      <el-dialog title="文章信息" :visible.sync="dialogFormVisible" width="50%">
        <el-form :model="commentForm"  label-width="80px" size="small">
          <el-form-item label="标题" >
            <el-input type="textarea" v-model="commentForm.contentReply" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
    </div>

</template>

<script>
import cbNavVue from '@/components/CeBianNav/cbNav.vue'
import newNavVue from '@/components/CeBianNav/newNav.vue'

    export default {
      comments:{
        // cbNavVue
        newNavVue
      },
        data() { //选项 / 数据
            return {
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    articleId: 0
                },
              user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")):{},
              comments: [], //评论列表
              commentForm:{}, //当前用户评论
              dialogFormVisible: false,

              isRespond:false,
              pBody:true,//表情打开控制
              aid:0,//文章id
              hasMore:false,
              haslogin:false,
              sendTip:'发送~',
              OwOlist:[//表情包和表情路径
                  {'title':'微笑','url':'weixiao.gif'},
                 {'title':'嘻嘻','url':'xixi.gif'},
                 {'title':'哈哈','url':'haha.gif'},
                 {'title':'可爱','url':'keai.gif'},
                 {'title':'可怜','url':'kelian.gif'},
                 {'title':'挖鼻','url':'wabi.gif'},
                 {'title':'吃惊','url':'chijing.gif'},
                 {'title':'害羞','url':'haixiu.gif'},
                 {'title':'挤眼','url':'jiyan.gif'},
                 {'title':'闭嘴','url':'bizui.gif'},
                 {'title':'鄙视','url':'bishi.gif'},
                 {'title':'爱你','url':'aini.gif'},
                 {'title':'泪','url':'lei.gif'},
                 {'title':'偷笑','url':'touxiao.gif'},
                 {'title':'亲亲','url':'qinqin.gif'},
                 {'title':'生病','url':'shengbing.gif'},
                 {'title':'太开心','url':'taikaixin.gif'},
                 {'title':'白眼','url':'baiyan.gif'},
                 {'title':'右哼哼','url':'youhengheng.gif'},
                 {'title':'左哼哼','url':'zuohengheng.gif'},
                 {'title':'嘘','url':'xu.gif'},
                 {'title':'衰','url':'shuai.gif'},
                 {'title':'吐','url':'tu.gif'},
                 {'title':'哈欠','url':'haqian.gif'},
                 {'title':'抱抱','url':'baobao.gif'},
                 {'title':'怒','url':'nu.gif'},
                 {'title':'疑问','url':'yiwen.gif'},
                 {'title':'馋嘴','url':'chanzui.gif'},
                 {'title':'拜拜','url':'baibai.gif'},
                 {'title':'思考','url':'sikao.gif'},
                 {'title':'汗','url':'han.gif'},
                 {'title':'困','url':'kun.gif'},
                 {'title':'睡','url':'shui.gif'},
                 {'title':'钱','url':'qian.gif'},
                 {'title':'失望','url':'shiwang.gif'},
                 {'title':'酷','url':'ku.gif'},
                 {'title':'色','url':'se.gif'},
                 {'title':'哼','url':'heng.gif'},
                 {'title':'鼓掌','url':'guzhang.gif'},
                 {'title':'晕','url':'yun.gif'},
                 {'title':'悲伤','url':'beishang.gif'},
                 {'title':'抓狂','url':'zhuakuang.gif'},
                 {'title':'黑线','url':'heixian.gif'},
                 {'title':'阴险','url':'yinxian.gif'},
                 {'title':'怒骂','url':'numa.gif'},
                 {'title':'互粉','url':'hufen.gif'},
                 {'title':'书呆子','url':'shudaizi.gif'},
                 {'title':'愤怒','url':'fennu.gif'},
                 {'title':'感冒','url':'ganmao.gif'},
                 {'title':'心','url':'xin.gif'},
                 {'title':'伤心','url':'shangxin.gif'},
                 {'title':'猪','url':'zhu.gif'},
                 {'title':'熊猫','url':'xiongmao.gif'},
                 {'title':'兔子','url':'tuzi.gif'},
                 {'title':'喔克','url':'ok.gif'},
                 {'title':'耶','url':'ye.gif'},
                 {'title':'棒棒','url':'good.gif'},
                 {'title':'不','url':'no.gif'},
                 {'title':'赞','url':'zan.gif'},
                 {'title':'来','url':'lai.gif'},
                 {'title':'弱','url':'ruo.gif'},
                 {'title':'草泥马','url':'caonima.gif'},
                 {'title':'神马','url':'shenma.gif'},
                 {'title':'囧','url':'jiong.gif'},
                 {'title':'浮云','url':'fuyun.gif'},
                 {'title':'给力','url':'geili.gif'},
                 {'title':'围观','url':'weiguan.gif'},
                 {'title':'威武','url':'weiwu.gif'},
                 {'title':'话筒','url':'huatong.gif'},
                 {'title':'蜡烛','url':'lazhu.gif'},
                 {'title':'蛋糕','url':'dangao.gif'},
                 {'title':'发红包','url':'fahongbao.gif'}
              ],
              context: ''

            }
        },
        methods: {
          //事件处理器
            // setData(initData,result){
            //     var msg = result.rows;
            //     if(initData){
            //         //刷新列表
            //         this.commentList = msg;
            //     }else{
            //         //加载更多
            //         this.commentList = this.commentList.concat(msg);
            //     }
            //
            //     this.hasMore = result.total>this.commentList.length
            //   },
          //选择表情包
          choseEmoji(inner){

              this.context +='[' + inner + ']';
          },
          analyzeEmoji(cont){//编译表情替换成图片展示出来
              var pattern1 = /\[[\u4e00-\u9fa5]+\]/g;
                var pattern2 = /\[[\u4e00-\u9fa5]+\]/;
                var content = cont.match(pattern1);
                var str = cont;
                if(content){
                    for(var i=0;i<content.length;i++){
                        for(var j=0;j<this.OwOlist.length;j++){
                            if("["+this.OwOlist[j].title +"]" == content[i]){
                                var src = this.OwOlist[j].url;
                                break;
                            }
                        }
                        let text = require("../../../assets/static/img/emot/image/"+src);
                        let qq = "'"
                        str = str.replace(pattern2,`<img src="`+text+`">`)
                    }
                    // console.log(str);
                }

            return str;
          },
          //发送留言
          sendMsg:function(){//留言
              var that = this;
            that.commentForm.content = this.context;
              if(that.commentForm.content){
                  that.sendTip = '咻~~';
                  that.save()

              }else{
                  that.sendTip = '内容不能为空~'
                  var timer = setTimeout(function(){
                      that.sendTip = '发送~';
                      clearTimeout(timer);
                  },3000)
              }
          },
          removeRespond:function(){//取消回复留言
            // this.isRespond = false;
            // this.rootId = -1;
            // this.toCommentId = -1;
            // this.toCommentUserId=-1;
            // this.$refs.tmsgBox.insertBefore(this.$refs.respondBox,this.$refs.listDom);
          },
          showCommentList: function(initData){//评论列表

              // }
          },
          addMoreFun:function(){//查看更多
              this.queryParams.pageNum++
              this.showCommentList(false);  //评论折叠功能
          },
          routeChange:function(){//重新加载
              this.queryParams.pageNum = 1
              this.showCommentList(true);
          },

          loadComment(){
            this.request.get("/comment/tree/"+this.aid).then(res =>{
              if(res.code === "200"){
                this.comments = res.data
              }else {
                this.$message.error(res.msg)
              }
            })
          },
          //评论
          save(){
            if(this.user.id){
              if(this.commentForm.contentReply){
                this.commentForm.content = this.commentForm.contentReply;
              }
              this.commentForm.articleId = this.aid
              this.request.post("/comment", this.commentForm).then(res=>{
                if(res.code ==="200"){
                  this.$message.success(res.data)
                  this.commentForm={}
                  this.loadComment();
                  this.sendTip = "再次评论"
                  this.dialogFormVisible =false
                }else {
                  this.$notify.error({
                    title: '身份验证错误',
                    message: res.msg
                  });
                }
              })
            }else{
              this.$message.warning("请先登录")
            }
          },
          //删除评论
          del(id){
            this.request.delete("/comment/"+id).then(res=>{
              if(res.code === "200"){
                this.$message.success(res.data)
                this.loadComment()
              }else {
                this.$message.error(res.msg)
              }
            })
          },
          //多级回复
          handleReply(pid){
            this.commentForm={ pid: pid}
            this.dialogFormVisible = true;
          },
          //取消
          cancel(){
            this.commentForm ={}
            this.dialogFormVisible =false
          },
        },
        components: { //定义组件

        },
        watch: {
           // 如果路由有变化，会再次执行该方法
           // '$route':'routeChange'
         },
        created() { //生命周期函数
            // console.log(this.$route);
          this.aid = this.$route.query.aid==undefined?1:parseInt(this.$route.query.aid);//获取传参的aid
            this.routeChange();
            this.loadComment();
        },
        mounted(){//页面加载完成后

        }
    }
</script>

<style>
.tmsgBox{
    position: relative;
    background: #fff;
    padding:15px;
    margin-bottom: 20px;
    border-radius: 5px;

}


.tmsg-respond h3{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}
.tmsg-respond h3 small{
    font-size: smaller;
    cursor: pointer;
}
.tmsg-respond textarea{
    background:#f4f6f7;
    height:100px;
    margin-bottom: 10px;
}
.OwO{
    position: relative;
    z-index: 1;
}
.OwO .OwO-logo{
    position: relative;
    border-radius: 4px;
    color:#444;
    display: inline-block;
    background: #fff;
    border:1px solid #ddd;
    font-size: 13px;
    padding:0 6px;
    cursor: pointer;
    height:30px;
    box-sizing: border-box;
    z-index: 2;
    line-height: 30px;
}
.OwO .OwO-logo:hover{
    animation:a 5s infinite ease-in-out;
    -webkit-animation:a 5s infinite ease-in-out;
}
.OwO .OwO-body{
    position: absolute;
    background: #fff;
    border:1px solid #ddd;
    z-index: 1;
    top:29px;
    border-radius: 0 4px 4px 4px;
    display: none;
}
.OwO-open .OwO-body{
    display: block;
}
.OwO-open .OwO-logo{
    border-radius: 4px 4px 0 0;
    border-bottom: none;
}
.OwO-open .OwO-logo:hover{
    animation:none;
    -webkit-animation:none;
}
.OwO .OwO-items {
    max-height: 197px;
    overflow: scroll;
    font-size: 0;
    padding:10px;
    z-index: 1
}
.OwO .OwO-items .OwO-item{
    background: #f7f7f7;
    padding:5px 10px;
    border-radius: 5px;
    display: inline-block;
    margin: 0 10px 12px 0;
    transition: 0.3s;
    line-height: 19px;
    font-size: 20px;
    cursor: pointer;
}
.OwO .OwO-items .OwO-item:hover{
    background: #eee;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
                0 3px 1px -2px rgba(0,0,0,.2),
                0 1px 5px 0 rgba(0,0,0,.12);
    animation:a 5s infinite ease-in-out;
    -webkit-animation:a 5s infinite ease-in-out;
}
.OwO .OwO-body .OwO-bar{
    width:100%;
    height:30px;
    border-top: 1px solid #ddd;
    background: #fff;
    border-radius: 0 0 4px 4px;
    color: #444;
}
.OwO .OwO-body .OwO-bar .OwO-packages li{
    display: inline-block;
    line-height: 30px;
    font-size: 14px;
    padding: 0 10px;
    cursor: pointer;
    margin-right: 3px;
    text-align: center;
}
.OwO .OwO-body .OwO-bar .OwO-packages li:first-of-type{
    border-radius: 0 0 0 3px;
}
@-webkit-keyframes a{
    2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
    4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
    6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}
    8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}
    10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}
    12%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
    14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}
    16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}
    18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}
    20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
    22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}
    24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
    26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}
    28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}
    30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
    32%,34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}
    36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
    38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}
    40%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
    42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}
    44%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}
    46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
    48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
    50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}
    52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
    54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}
    56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
    58%{-webkit-transform:translateY(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}
    60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
    62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
    64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
    66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}
    68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
    70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}
    72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}
    74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
    76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
    78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
    80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
    82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
    84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}
    86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}
    88%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
    90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}
    92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}
    94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}
    96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
    98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
    0%,to{-webkit-transform:translate(0) rotate(0deg);transform:translate(0) rotate(0deg)}
}
@keyframes a{
    2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
    4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
    6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}
    8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}
    10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}
    12%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
    14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}
    16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}
    18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}
    20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
    22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}
    24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
    26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}
    28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}
    30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
    32%,34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}
    36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
    38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}
    40%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
    42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}
    44%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}
    46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
    48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
    50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}
    52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
    54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}
    56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
    58%{-webkit-transform:translateY(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}
    60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
    62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
    64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
    66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}
    68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
    70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}
    72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}
    74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
    76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
    78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
    80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
    82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
    84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}
    86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}
    88%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
    90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}
    92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}
    94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}
    96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
    98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
    0%,to{-webkit-transform:translate(0) rotate(0deg);transform:translate(0) rotate(0deg)}
}
/*用户输入表单*/
.tmsg-r-info{
    margin:10px 0;
}
.tmsg-r-info input{
    height:30px;
    border-radius: 4px;
    background: #f4f6f7;
}
.tmsg-r-info .info-submit{
    margin: 10px 0;
    text-align: center;
}
.tmsg-r-info .info-submit p,.tmsg-commentshow h1{
    /*background: #97dffd;*/
    color:#fff;
    border-radius: 5px;
    cursor: pointer;
    /*transition: all .3s ease-in-out;*/
    height:30px;
    line-height: 30px;
    text-align: center;
}
/*.tmsg-r-info .info-submit p:hover{
    background: #47456d;
}*/
/*评论列表*/
.tmsg-comments .tmsg-comments-tip{
    display: block;
    border-left: 2px solid #363d4c;
    padding: 0 10px;
    margin: 40px 0;
    font-size: 20px;
}
.tmsg-commentlist {
    margin-bottom:20px;

}
.tmsg-commentshow>.tmsg-commentlist{
    border-bottom: 1px solid #e5eaed;
}
.tmsg-c-item{
    border-top: 1px solid #e5eaed;
}
.tmsg-c-item article{
    margin:20px 0;
}
.tmsg-c-item article header{
    margin-bottom:10px;
}
.tmsg-c-item article header img{
    width: 65px;
    height: 65px;
    border-radius: 50%;
    float: left;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    margin-right: 15px;
    object-fit: cover;
}
.tmsg-c-item article header img:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}
.tmsg-c-item article header .i-name{
    font-size: 14px;
    margin:5px 8px 7px 0;
    color:#444;
    font-weight: bold;
    display: inline-block;
}
.tmsg-c-item article header .i-class{
    display: inline-block;
    margin-left:10px;
    background: #dff0d8;
    color:#3c763d;
    border-radius: 5px;
    padding: 3px 6px;
    font-size: 12px;
    font-weight: 400;
}
.tmsg-c-item article header .i-time{
    color:#aaa;
    font-size: 12px;
}
.tmsg-c-item article section{
    margin-left: 80px;
}
.tmsg-c-item article section p img{
    vertical-align: middle;
}
.tmsg-c-item article section .tmsg-replay{
    margin:10px 0;
    font-size: 12px;
    color:#64609E;
    cursor: pointer;
}

</style>
